<template>
  <div>
    <button @click="changefn">修改只读属性按钮</button>
    <div>姓：<input type="text" v-model="name" /></div>
    <div>名：<input type="text" v-model="age" /></div>
    <div>全名和年龄：{{ nameage }}</div>
    <div>全名和年龄：{{ nameage }}</div>
    <div>全名和年龄：{{ nameage }}</div>
  </div>
</template>
<script setup lang="ts"  name= "person555">
import { reactive, ref, toRefs, toRef, computed } from "vue";   //使用那个函数前必须先导入那个函数
let name = ref("张三");
let age = ref(15);
// 1简易写法
// let nameage = computed(() => {
//   //计算属性具有带缓存作用  方法没有待缓存作用，并且nameage是只读的不可修改的,
//   return name.value + age.value;
// });
// 2完整写法
let nameage = computed({
  get() {
    return name.value + age.value;
  },
  set(val) {
    age.value = val;
  },
});
let changefn = () => {
  nameage.value = 1005;
};
// 总结vue于vue3其实计算属性这一块感觉没有太大区别
</script>